import React, { Component } from 'react';
import '../../styles/Home.scss'
import { SearchOutline, RightOutline, HistogramOutline } from 'antd-mobile-icons'
import { Swiper } from 'antd-mobile'

class Home extends Component {
    constructor() {
        super()
        this.state = {
            currentIndex: 0,
            homelist: [
                {
                    pic: 'https://img0.baidu.com/it/u=2183492329,109187493&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500', desc: '对未来有构想的人们与丘吉尔一样，会迫不及待，等不及次日太阳升起,就想起床马上行动。'
                }
            ],
            btn: [
                {
                    name: '查看往期'
                },
                {
                    name: '分享'
                },
            ],
            btn1: [
                {
                    name: '我要荐书'
                },
                {
                    name: '逛逛书城'
                },
            ]
        }
    }
    dianji(index) {
        this.setState({ currentIndex: index })
    }
    handclick() {
        this.props.history.push('/serach');
    }
    render() {
        return (
            <div className='home'>
                <div className="header">
                    <span><SearchOutline /></span>
                    <input onClick={() => { this.handclick() }} type="text" placeholder='输入书名或作者名字搜索' />
                </div>
                <div className="zhong">
                    <Swiper slideSize={90} trackOffset={5} stuckAtBoundary={false} style={{ '--height': '480px', }}>
                        <Swiper.Item>
                            <div className="item1">
                                {
                                    this.state.homelist.map((item, index) => {
                                        return (
                                            <div className="zhong" key={index}>
                                                <img src={item.pic} alt="" />
                                                <div className="desc">
                                                    {item.desc}
                                                </div>
                                                <div className="anniu">
                                                    {
                                                        this.state.btn.map((item, index) => {
                                                            return (
                                                                <div className="div" key={index}>
                                                                    <span onClick={() => { this.dianji(index) }} className={(this.state.currentIndex == index ? 'active' : '')}>{item.name}</span>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Swiper.Item>
                        <Swiper.Item>
                            <div className="item2">
                                <div className="hezi">
                                    <div className="desc">
                                        我欲乘风向北行,雪落轩辕大如席。 我欲借船向东游,绰约仙子迎风立。 我欲踏云千万里,庙堂龙吟奈我何? 昆仑之巅沐日光,沧海绝境见青山。 长风万里燕归来,不见天涯人不回!
                                    </div>
                                    <p>《少年歌行》</p>
                                    <div>古典著</div>
                                </div>
                                <div className="box">
                                    <div><span>9.2</span> 豆瓣评分</div>
                                    <span className='icon'><HistogramOutline />听书</span>
                                </div>
                            </div>
                        </Swiper.Item>
                        <Swiper.Item>
                            <div className="item3">
                                <div className="he">
                                    <div className="desc">
                                        御剑乘风来，除魔天地间。有酒乐逍遥，无酒我亦颠。一饮尽山河，再饮吞日月。千杯醉不倒，唯我酒剑仙。
                                    </div>
                                    <p>《少年歌行》</p>
                                    <p>《事件》</p>
                                    <p>《时间简史》</p>
                                    <p>《少年》</p>
                                    <p>《少年歌》等五本书</p>
                                    <div>古典著</div>
                                </div>
                            </div>
                        </Swiper.Item>
                        <Swiper.Item>
                            <div className="item4">
                                <div className="cons">
                                    <p>精</p>
                                    <p>读</p>
                                    <p>好</p>
                                    <p>书</p>
                                    <p>,</p>
                                    <p>终</p>
                                    <p>生</p>
                                    <p>成</p>
                                    <p>长</p>
                                </div>
                                <div className="anniu">
                                    {
                                        this.state.btn1.map((item, index) => {
                                            return (
                                                <div className="div" key={index}>
                                                    <span onClick={() => { this.dianji(index) }} className={(this.state.currentIndex == index ? 'active' : '')}>{item.name}</span>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        </Swiper.Item>
                    </Swiper>
                </div>
                <div className="bo">
                    <div className="last">
                        <span>书</span>
                        <span>上一次阅读：&emsp;《蜥蜴脑法则》</span>
                        <span><RightOutline /></span>
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;